<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>绑定</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
    <style type="text/css">
        .layui-table-cell{height:40px;line-height:40px;}
    </style>
</head>
<body >
<!--搜索框-->
<!--<div class="layui-form">-->
<!--    <div class="layui-form-item" style="margin-bottom: 30px;text-align: center;">-->
<!--        <div class="layui-inline">-->
<!--            &lt;!&ndash;<label class="layui-form-label">会员姓名或编号</label>&ndash;&gt;-->
<!--            <div class="layui-input-inline">-->
<!--                <input type="text" name="name" placeholder="请输入姓名" autocomplete="off" class="layui-input" />-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-inline">-->
<!--            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="search-qiye-submit">-->
<!--                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>-->
<!--            </button>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<blockquote class="layui-elem-quote quoteBox mod_default_box">
    <form class="layui-form">
        <div class="layui-inline">
            <label class="layui-form-label">关键字</label>
            <div class="layui-input-inline">
                <input type="text" id="name" name="name" placeholder="编号、姓名、联系方式" autocomplete="off" class="layui-input" />
            </div>
            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="search-qiye-submit">
                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
        </div>
    </form>
</blockquote>
<!--<blockquote class="layui-elem-quote quoteBox mod_default_box">-->
    <!--<form class="layui-form">-->
        <!--<div class="layui-inline">-->
            <!--<label class="layui-form-label">物业</label>-->
            <!--<div class="layui-input-inline">-->
                <!--<select name="city" lay-verify="" lay-filter="wuye" id="wuye" lay-search>-->
                    <!--<option value="">选择物业</option>-->
                <!--</select>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="layui-inline">-->
            <!--<label class="layui-form-label">企业</label>-->
            <!--<div class="layui-input-inline">-->
                <!--<select name="city" lay-verify="" lay-filter="qiye" id="qiye" lay-search>-->
                    <!--<option value="">选择企业</option>-->
                <!--</select>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="layui-inline">-->
            <!--<label class="layui-form-label">姓名或编号</label>-->
            <!--<div class="layui-input-inline">-->
                <!--<input type="text" class="layui-input searchVal" name="name" placeholder="请输入姓名或编号" />-->
            <!--</div>-->
            <!--<a class="layui-btn  search_btn" data-type="reload">搜索</a>-->
        <!--</div>-->
    <!--</form>-->
<!--</blockquote>-->
<div style="display: none" id="batchAdd"></div>
<!--数据列表-->
<table class="layui-hide" id="test" lay-filter="qiye-table"></table>
<script type="text/html" id="qiye-toolbar">
    {{# if(d.cardNo != null) {}}
    <a class="layui-btn layui-btn-checked layui-btn-xs" lay-event="reset_card">解除卡绑定关系</a>
    {{# } }}
    <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>-->
</script>

<script src="../../js/layui/layui.js"></script>
<script src="../../js/layui/layui.all.js"></script>
<script src="../../js/config.js"></script>
<script src="../../js/token.js"></script>
<script>
    layui.use(['table','upload'], function() {
        var $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var upload = layui.upload;

        var name = ""

        table.render({
            elem: '#test'
            , id: 'staff-table-id'//重载需要
            , url: HOST+'staff/selectstaff'
            , title: '员工表'
            , cols: [[
                {type: 'numbers',title: '序号'}
                , {field: 'bh',align : 'center',width : 125, title: '员工编号'}
                , {field: 'name', width: 110, align: 'center', title: '姓名'}
                , {field: 'nicheng', width: 110, align: 'center', title: '昵称'}
                ,{field:'sex',width : 60,align : 'center', title: '性别',templet: function (d) {
                        if (d.sex==0) return "女";
                        else if (d.sex==1) return "男";
                    }
                }
                , {field: 'phone',align : 'center',width : 125,title: '联系方式'}
                , {field: 'address',align : 'center',width : 125,title: '家庭住址'}
                , {field: 'guoji',align : 'center',width : 120, title: '国籍',templet: function (d) {
                        if (d.guoji=="null" || d.guoji==null || d.guoji=="undefined") return "";
                        else return d.guoji;
                    }}
                /*, {field: 'sfz',align : 'center',width : 180, title: '证件号'}*/
                , {field: 'cstime',align : 'center',width : 125, title: '出生日期'}
                , {field: 'qyName',align : 'center',width : 125, title: '所属企业' , templet:function(res){
                        if(res.qiye != undefined) {
                            return res.qiye.qyname
                        }else{
                            return ""
                        }
                    }}
                , {field: 'zhiye',align : 'center',width : 140, title: '职业'}
                , {field: 'cardNo',align : 'center',width : 120, title: '员工卡号'}
                , {field: 'rztime',align : 'center',width : 125, title: '入职时间'}
                , {field: 'status',align : 'center',width : 125, title: '状态',sort:true,templet: function (d) {
                        if (d.status==0) return "离职";
                        else if (d.status==1) return "在职";
                    }
                }
                , {field: 'picture',align : 'center',title: '头像',width : 125,templet: function (d) {
                        if (d.picture==null || d.picture=="" || d.picture==undefined){

                        }else{
                            return "<div><img src=\""+HOST+"upload/"+d.picture+"\" onclick=\"previewImgs(this)\"></div>";
                        }
                    }}
                , {field: 'message',align : 'center', width : 125,title: '备注'}
                , {field: 'dqtime',align : 'center',width : 170, title: '到期时间'}
                // , {field: 'cstime',align : 'center',width : 170, title: '出生日期'}
                // , {field: 'jfstatus', width: 110, align: 'center', title: '缴费状态', templet: function (d) {
                //         if (d.jfstatus == 0) return "正常";
                //         else if (d.jfstatus == 1) return "快到期";
                //         else if (d.jfstatus == 2) return "已到期";
                //     }
                // }
                , {toolbar: "#qiye-toolbar",align : 'center', width: 200, title: "操作",fixed: 'right'}
            ]]
            , page: true
            ,page: {
                curr: layui.data("staff_page").index
            },
            done: (res, curr, count) => {
                layui.data("staff_page", {
                    key: 'index',
                    value: curr
                });
                bindClick();
            }
        });

        //搜索操作
        form.on('submit(search-qiye-submit)', function (data) {
            name = data.field.name
            table.reload('staff-table-id', {
                where: {"name": name}
                , page: {
                    curr: 1
                }
            });
            return false;
        });

        var uploadInst = upload.render({
            elem: '#batchAdd'
            , url: "/staff/batchAddStaff"
            , accept: "file",
            shade: [0.5,'#000'],
            exts: 'xls|xlsx|xlsm|xlt|xltx|xltm'
            , before: function (obj) {
                layui.layer.load();
                console.log("obj",obj);
            }
            , done: function (res) {
                if (res.code == 200) {
                    layer.msg("导入成功！");
                    table.reload("staff-table-id");
                    var  index = layui.layer.load();
                    layer.close(index);
                }
                else {
                    layer.alert(res.data, {
                        icon: 2,
                        skin: 'layer-ext-demo'
                    })
                    var  index = layui.layer.load();
                    layer.close(index);
                }

            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        function bindClick() {
            $('#exportExcel').on('click',function () {
                var staffName = $("#name").val();
                var wuye = $("#wuye").val();
                var qiye = $("#qiye").val();
                $("#exportExcel").attr('href',"/staff/exportExcelByStaff?staffName=" + staffName + "&wuye=" + wuye + "&qiye=" + qiye);
                console.log($("#exportExcel").attr('href'));
            });
        }

        /*table.on('toolbar(qiye-table)', function (obj) {
            var data=obj.data;
            var event = obj.event;
            if (event === 'batchAdd') {

            }
        })*/
        //表操作  监听操作
        table.on('toolbar(qiye-table)', function (obj) {
            var data=obj.data;
            var event = obj.event;
            if (event === 'batchAdd') {
                $("#batchAdd").click();
            }
        })

        //表操作  监听操作
        table.on('tool(qiye-table)', function (obj) {
            var data=obj.data;
            var event = obj.event;
            if(event === 'reset_card'){
                layer.confirm("确定解除卡与用户绑定关系吗？",function (index) {
                    $.ajax({
                        url: HOST+"staff/reset_card?id=" + data.id
                        , type: "GET"
                        , success: function (data) {
                            if (data.code == 200) {
                                layer.msg("解除成功");
                                layer.close(index);
                                table.reload("staff-table-id");
                            } else if (data.code == 500) {
                                layer.msg(data.msg);
                            }else {
                                layer.msg("拒绝访问");
                            }
                        }
                        , error: function () {
                            console.log("ajax error");
                        }
                    });
                })
            }
        });
    });
</script>

<script>
    function previewImgs(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='800px' height='500px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [800 + 'px', 550 + 'px'],// area: [width + 'px',height+'px'],  //原图显示
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }
</script>
</body>
</html>